<template>
  <div class="app-container">
    <el-descriptions class="margin-top" title="患者信息"></el-descriptions>
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="200px" class="demo-ruleForm">


      <el-form-item label="" prop="name">
        <div style="display: flex;flex-wrap: wrap;">
          <div class="name-msg">
            姓名：<el-input @change="changePinyin" clearable v-model="ruleForm.storeName" maxlength="249" placeholder="请输入"
              :disabled="isDisabled" />
          </div>
          <div class="name-msg">
            姓别： <el-select v-model="ruleForm.sex" clearable placeholder="请选择" class="mr20" :disabled="isDisabled"
              style="width:100%;">
              <el-option key="1" label="男" value="1"></el-option>
              <el-option key="2" label="女" value="2"></el-option>
            </el-select>
          </div>
          <div class="name-msg">
            年龄：<el-input @change="changePinyin" clearable v-model="ruleForm.storeName" maxlength="249" placeholder="请输入"
              :disabled="isDisabled" />
          </div>
          <div class="name-msg">
            编号：<el-input @change="changePinyin" clearable v-model="ruleForm.storeName" maxlength="249" placeholder="请输入"
              :disabled="isDisabled" />
          </div>
          <div class="name-msg">
            科室：<el-input @change="changePinyin" clearable v-model="ruleForm.storeName" maxlength="249" placeholder="请输入"
              :disabled="isDisabled" />
          </div>

          <div class="name-msg">
            就诊时间：<el-date-picker style="width: 100%;" v-model="ruleForm.age" value-format="yyyy-MM-dd HH:mm:ss"
              type="datetime" placeholder="选择日期时间">
            </el-date-picker>

          </div>


        </div>

      </el-form-item>


      <el-descriptions class="margin-top" title="主述"></el-descriptions>

      <el-form-item label="主述" prop="recourseIdList">
        <el-input type="textarea" clearable v-model="ruleForm.freeTime" :show-word-limit="true"></el-input>

      </el-form-item>
      <el-form-item label="现病史" prop="recourseIdList">
        <el-input type="textarea" clearable v-model="ruleForm.freeTime" :show-word-limit="true"></el-input>

      </el-form-item>
      <el-form-item label="既往史" prop="recourseIdList">
        <el-input type="textarea" clearable v-model="ruleForm.freeTime" :show-word-limit="true"></el-input>

      </el-form-item>
      <el-form-item label="检查" prop="recourseIdList">
        <el-input v-model="ruleForm.pyName" clearable placeholder="请输入" />
      </el-form-item>
      <el-form-item label="影像检查：" prop="recourseIdList">
        <el-input v-model="ruleForm.pyName" clearable placeholder="请输入" />
      </el-form-item>
      <el-form-item label="诊断：" prop="recourseIdList">
        <el-input v-model="ruleForm.pyName" clearable placeholder="请输入" />
      </el-form-item>
      <el-form-item label="治疗方案：" prop="recourseIdList">
        <el-input v-model="ruleForm.pyName" clearable placeholder="请输入" />
      </el-form-item>
      <el-form-item label="治疗：" prop="recourseIdList">
        <el-input v-model="ruleForm.pyName" clearable placeholder="请输入" />
      </el-form-item>

      <el-form-item label="医嘱：" prop="recourseIdList">
        <el-input v-model="ruleForm.pyName" type="textarea" clearable placeholder="请输入" />
      </el-form-item>
      <el-form-item label="" prop="recourseIdList">
        已告知病情、治疗、药物不良反应，如有不适，请及时复诊。
      </el-form-item>
      <el-form-item label="医生签字：" prop="recourseIdList">
        <el-input v-model="ruleForm.pyName" clearable placeholder="请输入" />
      </el-form-item>
    </el-form>
    <div slot="footer" style="text-align: center;" class="dialog-footer">
          <el-button type="primary" @click="submitDataScope">打印</el-button>
          <el-button @click="cancelDataScope">返回</el-button>
        </div>

  </div>
</template>


<script>

import {
  provinceAndCityData,
  pcTextArr,
  regionData,
  pcaTextArr,
  codeToText,
} from "element-china-area-data";
// import { listTags } from "@/api/course/tag";
// import { listResources } from "@/api/course/resource";
// import {
//   addCourse,
//   getCourse,
//   updateCourse,
//   freeTimeType,
// } from "@/api/course/course";
// import { getAuditCourse, updateAuditStatus } from "@/api/audit/audit";
// import MyVideoPlayer from "@/components/MyVideoPlayer";
// import { getList } from "@/api/course/special";
// import { getInstitutionList } from "@/api/ums/institution";

export default {
  name: "AuditCourseEdit",

  dicts: ["sys_normal_disable"],
  data() {
    return {
      roleList: [
        {
          tit: '左侧',
          kk: '',
          qs: '',
          xz: '',
          xy: '',
          tj: '',
          jy: ''
        },
        {
          tit: '右侧',
          kk: '',
          qs: '',
          xz: '',
          xy: '',
          tj: '',
          jy: ''
        }

      ],


      caseData: {
        tentativeList: [
          {
            tit: '肌肉疼痛',
            item: [
              {
                id: 1,
                tit: '肌肉疼痛左'
              },
              {
                id: 2,
                tit: '肌肉疼痛右'
              }
            ]
          },
          {
            tit: '关节疼痛',
            item: [
              {
                id: 1,
                tit: '关节疼痛左'
              },
              {
                id: 2,
                tit: '关节疼痛右'
              }
            ]
          },
          {
            tit: 'TMD疼痛',
            item: [
              {
                id: 1,
                tit: '左1'
              },
              {
                id: 2,
                tit: '左2'
              }
            ]
          }
        ],
        inducement: [
          {
            id: 1,
            tit: '左1'
          },
          {
            id: 2,
            tit: '左2'
          }
          , {
            id: 3,
            tit: '左3'
          }
          , {
            id: 4,
            tit: '左4'
          }
          , {
            id: 5,
            tit: '左5'
          }
          , {
            id: 6,
            tit: '左6'
          }
          , {
            id: 7,
            tit: '左7'
          }
          , {
            id: 8,
            tit: '左8'
          }
          , {
            id: 9,
            tit: '左9'
          }
          , {
            id: 10,
            tit: '左10'
          }
          , {
            id: 12,
            tit: '左12'
          }
          , {
            id: 13,
            tit: '左13'
          }
          ,

        ],
        caseList: [
          {
            checkList: [],
            inp1: '',
            inp2: '',
            tit: '胸部：',
            caseProList: [
              {
                id: 1,
                tit: '左1'
              },
              {
                id: 2,
                tit: '左2'
              }
              , {
                id: 3,
                tit: '左3'
              }
              , {
                id: 4,
                tit: '左4'
              }
              , {
                id: 5,
                tit: '左5'
              }
              , {
                id: 6,
                tit: '左6'
              }
              , {
                id: 7,
                tit: '左7'
              }
              , {
                id: 8,
                tit: '左8'
              }
              , {
                id: 9,
                tit: '左9'
              }
              , {
                id: 10,
                tit: '左10'
              }
              , {
                id: 12,
                tit: '左12'
              }
              , {
                id: 13,
                tit: '左13'
              }
              ,
            ]
          },
          {
            checkList: [],
            inp1: '',
            inp2: '',
            tit: '脚步：',
            caseProList: [
              {
                id: 1,
                tit: '左1'
              },
              {
                id: 2,
                tit: '左2'
              }
              , {
                id: 3,
                tit: '左3'
              }
              , {
                id: 4,
                tit: '左4'
              }
              , {
                id: 5,
                tit: '左5'
              }
              , {
                id: 6,
                tit: '左6'
              }
              , {
                id: 7,
                tit: '左7'
              }
              , {
                id: 8,
                tit: '左8'
              }
              , {
                id: 9,
                tit: '左9'
              }
              , {
                id: 10,
                tit: '左10'
              }
              , {
                id: 12,
                tit: '左12'
              }
              , {
                id: 13,
                tit: '左13'
              }
              ,
            ]
          },
          {
            checkList: [],
            inp1: '',
            inp2: '',
            tit: '神经衰弱：',
            caseProList: [
              {
                id: 1,
                tit: '左1'
              },
              {
                id: 2,
                tit: '左2'
              }
              , {
                id: 3,
                tit: '左3'
              }
              , {
                id: 4,
                tit: '左4'
              }
              , {
                id: 5,
                tit: '左5'
              }
              , {
                id: 6,
                tit: '左6'
              }
              , {
                id: 7,
                tit: '左7'
              }
              , {
                id: 8,
                tit: '左8'
              }
              , {
                id: 9,
                tit: '左9'
              }
              , {
                id: 10,
                tit: '左10'
              }
              , {
                id: 12,
                tit: '左12'
              }
              , {
                id: 13,
                tit: '左13'
              }
              ,
            ]
          },
          {
            checkList: [],
            inp1: '',
            inp2: '',
            tit: '偏侧咀嚼：',
            resonType: true,
            reson: '',
            caseProList: [
              {
                id: 1,
                tit: '左1'
              },
              {
                id: 2,
                tit: '左2'
              }
              , {
                id: 3,
                tit: '左3'
              }
            ]
          },
          {
            foodType: true,
            food: '',
            inp1: '',
            inp2: '',
            tit: '食物癖好：',

          },
          {
            otherType: true,
            other: '',
            inp1: '',
            inp2: '',
            tit: '其他：',


          }

        ],
      },

      pcaTextArr,
      selectedOptions: [],
      value1: '',
      speakerList: [],
      courseAuditStatusOption: [
        { value: "1", label: "审核通过" },
        // {value: '2', label: '审核中'},
        { value: "0", label: "审核不通过" },
      ],
      tags: [],
      tags1: [],
      id: undefined,
      fileUrl: "",
      videoOpen: false,
      resourceData: [],
      recourseIds: [],
      specialList: [],
      timeList: [],
      times: undefined,
      institutions: [],
      sort: "",
      item: "",
      index: "",
      recourseList: [],
      ruleForm: {
        checkList: ['选中且禁用', '复选框 A'],
        name: undefined,
        coverUrl: undefined,
        speaker: undefined,
        intro: undefined,
        recourseIdList: [],
        isEvaluations: [],
        recourseIds: undefined,
        isCharge: undefined,
        isEvaluation: undefined,
        isYun: undefined,
        starCoin: undefined,
        tags: undefined,
        specials: undefined,
        codeUrl: undefined,
        auditStatus: undefined,
        auditRemark: undefined,
        institutionId: undefined,
      },
      rules: {
        // name: [
        //   { required: true, message: "请输入课程名称", trigger: "blur" },
        //   {
        //     min: 1,
        //     max: 40,
        //     message: "长度在 1 到 40 个字符",
        //     trigger: "blur",
        //   },
        // ],
        // speaker: [
        //   { required: true, message: "请输入主讲人", trigger: "blur" },
        //   { min: 1, max: 8, message: "长度在 1 到 8 个字符", trigger: "blur" },
        // ],
        coverUrl: [
          { required: true, message: "请上传课程封面", trigger: "blur" },
        ],
        speakerCoverUrl: [
          { required: true, message: "请上传主讲人封面", trigger: "blur" },
        ],
        // recourseIdList: [
        //   { required: true, message: "请选择课节", trigger: "blur" },
        // ],
        intro: [
          { required: true, message: "请输入课程简介", trigger: "blur" },
          // {min: 1, max: 400, message: '长度在 1 到 400 个字符', trigger: 'blur'}
        ],
        introInfo: [
          {
            min: 1,
            max: 40,
            message: "长度在 1 到 40 个字符",
            trigger: "blur",
          },
        ],
        isCharge: [
          { required: true, message: "请选择收费类型", trigger: "blur" },
        ],
        speakerIntro: [
          { required: true, message: "请输入主讲人简介", trigger: "blur" },
          {
            min: 1,
            max: 400,
            message: "长度在 1 到 400 个字符",
            trigger: "blur",
          },
        ],
        speakerJob: [
          {
            min: 1,
            max: 30,
            message: "长度在 1 到 30 个字符",
            trigger: "blur",
          },
        ],
        // codeUrl: [
        //   {required: true, message: '请上传服务人员二维码', trigger: 'blur'}
        // ],
        starCoin: [
          {
            type: "number",
            required: true,
            message: "请填写价格",
            trigger: "blur",
          },
        ],
        tagIds: [
          { required: true, message: "请选择课程等级标签", trigger: "blur" },
        ],
        specials: [
          { required: true, message: "请选择课程专题", trigger: "blur" },
        ],
        isEvaluations: [
          { required: false, message: "请选择用途", trigger: "blur" },
        ],
        auditRemark: [
          {
            min: 1,
            max: 400,
            message: "长度在 1 到 400 个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
  watch: {
    "$route.query.id": {
      handler(val) {
        if (this.$route.fullPath.includes("/audit-data/edit")) {
          if (val) {
            this.getInfo();
          }
        }
      },
      deep: true,
      immediate: true,
    },
  },
  mounted() {
    this.getInfo();
    this.getResources();
    console.log("mounted");
  },
  created() {
    console.log("audit edit created");
    this.getTags();

    this.getSpecialList();

    this.getInstitutions();
  },
  methods: {
    submitDataScope(){
      console.log("调用接口啥的")
    },
    cancelDataScope(){
      this.$router.go(-1)
      return;
      let id=this.$route.query.id
      this.$router.push({ path: "addPersonIndex", query: { id: id } });
    },
    arers() {
      console.log(this.selectedOptions, 'selectedOptionsselectedOptionsselectedOptions')
    },
    view(url) {
      this.fileUrl = url;
      console.info(url);
      this.videoOpen = true;
    },
    getInfo() {
      let resourceIds = [];
      let recourseIdList = [];
      this.id = this.$route.query.id;
      getAuditCourse(this.id).then((response) => {
        this.speakerList = response.data.entity.speakerList
        console.info(response);
        let entity = response.data.entity;
        resourceIds = entity.resourceIds;
        if (entity.resourceIds && entity.resourceIds.length > 0) {
          // this.recourseList = []
          // const split = entity.resourceIds.split(',');
          // split.forEach(p => {
          //   this.resourceData.forEach(o => {
          //     console.info(split + "----" + o.key + "---" + split.indexOf(o.key));
          //     if (p == o.key) {
          //       this.recourseList.push({ id: o.key, name: o.label })
          //     }
          //   });
          // });

          entity.recourseIdList = entity.resourceIds.split(",");
        }

        entity.isCharge = entity.isCharge.toString();
        entity.isEvaluation = entity.isEvaluation
          ? entity.isEvaluation.toString()
          : "0";
        // this.ruleForm.isCharge = entity.isCharge.toString()
        if (entity.tags && entity.tags.length > 0) {
          // this.ruleForm.tagIds = entity.tags.split(",")
          entity.tagIds = entity.tags.split(",");
        }

        if (entity.specials && entity.specials.length > 0) {
          entity.specialIds = entity.specials.split(",");
        }
        entity.isEvaluations = [];
        if (entity.isEvaluation) {
          entity.isEvaluations.push(entity.isEvaluation + "");
        }
        if (entity.isYun) {
          entity.isEvaluations.push(entity.isYun + "");
        }
        if (entity.times && entity.times.length > 0) {
          this.timeList = [];
          const split = entity.times.split(",");
          split.forEach((p) => {
            this.timeList.push(p);
          });
          this.times = entity.times;
        }
        this.recourseIds = entity.resourceIds;
        entity.auditStatus = "1";
        this.ruleForm = entity;
        if (this.ruleForm.freeTime) {
          this.ruleForm.isCharge = "2";
        }
      });
      setTimeout(() => {
        if (resourceIds && resourceIds.length > 0) {
          console.log("yoken");
          this.recourseList = [];
          const split = resourceIds.split(",");
          split.forEach((p) => {
            this.resourceData.forEach((o) => {
              if (p == o.key) {
                this.recourseList.push({
                  id: o.key,
                  name: o.label,
                  fileUrl: o.fileUrl,
                });
              }
            });
          })
        }
      }, 2000);
    },
    closeSelf() {
      this.$emit("closeme");
    },
    confirm() { },
    //获取所有角色
    getRoleData() { },
    //右侧选中
    choose(value) {
      let self = this;
      self.item = value;
    },
    //上移
    handleUp(item, index) {
      // item为选中的项，index为对应的index
      let self = this;
      item = self.item;
      console.log(item);
      if (item.length == 1) {
        self.ruleForm.recourseIdList.find((val, indexs, arr) => {
          if (val == item) {
            index = indexs;
          }
        });
        if (index == 0) {
          //当选择的项的下标为0
          self.$message("已经移到顶部");
          return;
        }
        // 上移-改变的数组
        let changeItem = JSON.parse(
          JSON.stringify(self.ruleForm.recourseIdList[index - 1])
        );
        self.ruleForm.recourseIdList.splice(index - 1, 1);
        self.ruleForm.recourseIdList.splice(index, 0, changeItem);
      } else {
        self.$message.error("只能选择一条数据上移");
        return;
      }
    },
    //下移
    handleDown(item, index) {
      let self = this;
      item = self.item;
      if (item.length == 1) {
        //选中值的下标
        self.ruleForm.recourseIdList.find((val, indexs, arr) => {
          if (val == item) {
            index = indexs;
          }
        });

        if (index == self.ruleForm.recourseIdList.length - 1) {
          // 这里是length-1,因为下标值从0开始
          self.$message("已经移到底部");
          return;
        }
        let changeItem = JSON.parse(
          JSON.stringify(self.ruleForm.recourseIdList[index])
        );
        self.ruleForm.recourseIdList.splice(index, 1);
        self.ruleForm.recourseIdList.splice(index + 1, 0, changeItem);
      } else {
        self.$message.error("只能选择一条数据下移");
        return;
      }
    },
    getResources() {
      this.resourceData = [];
      listResources().then((response) => {
        const resources = response.data;
        resources.forEach((resource) => {
          this.resourceData.push({
            label: resource.name,
            key: resource.id,
            fileUrl: resource.fileUrl,
          });
        });
        console.log(this.resourceData, "rrrthis.resourceDatathis.resourceData");
      });
    },
    getTags() {
      listTags().then((response) => {
        this.tags = response.data;
      });
      freeTimeType().then((response) => {
        this.tags1 = response.data;
      });
    },
    getSpecialList() {
      getList().then((res) => {
        this.specialList = [];
        res.data.forEach((item) => {
          this.specialList.push({
            label: item.name,
            id: item.id,
          });
        });
      });
    },
    getInstitutions() {
      getInstitutionList().then((response) => {
        this.institutions = response.data;
      });
    },
    submitFormover() {
      this.$router.push({ path: "doctorManage" });
    },
    submitForm(formName) {
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          updateAuditStatus({
            id: this.ruleForm.tempId,
            auditStatus: this.ruleForm.auditStatus,
            auditRemark: this.ruleForm.auditRemark,
          }).then((response) => {
            this.$modal.msgSuccess("审核成功");
            //关闭当前页 跳转上一页
            this.$store.state.tagsView.visitedViews.splice(
              this.$store.state.tagsView.visitedViews.findIndex(
                (item) => item.path === this.$route.path
              ),
              1
            );
            this.$router.push({
              path: this.$store.state.tagsView.visitedViews[
                this.$store.state.tagsView.visitedViews.length - 1
              ].path,
              query:
                this.$store.state.tagsView.visitedViews[
                  this.$store.state.tagsView.visitedViews.length - 1
                ].query,
            });
          });
        }
      });
    },
  },
};
</script>
<style scoped lang="scss">
.newTable {
  // height: 300px;
  width: 100%;
  // border: 1px solid red;
  padding: 10px 30px;

  .newTableMsg {
    border: 1px solid #333;
    padding: 5px;
    align-items: center;
    display: flex;

    .newTableMsgInp {
      width: 30%;

      display: flex;
    }

    .newTableCheckbox {
      display: flex;
      // width: 70%;
      align-items: center;
    }
  }

}

.name-msg1 {
  width: 13%;
  margin: 10px;
}

.name-msg {
  width: 23%;
  margin: 10px;
}

.speakerList-wrap {
  width: 64%;
  margin: 20px auto;


  .speakerList {
    margin: 0 10px 10px 0px;
    border: 1px solid #DCDFE6;
    display: flex;

    padding: 6px 10px;
    border-radius: 5px;
    display: flex;

    // flex-direction: column;
    // text-align: center;
    .speakerList-img {
      width: 150px;
      text-align: center;
    }

    .speakerList-left {

      margin-bottom: 10px;

    }


    .speakerList-right {
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;

      margin-left: 20px;
      // cursor: pointer;
    }
  }
}
</style>
